<!--
@fucntion: 设备分析
-->
<template>
  <el-card style="background-color: #F2F6FC;">
    <el-card style="background-color: #C0C4CC;"> 
      <el-row :gutter="24">
          <el-col :span="6">
            <span>全院设备总数: {{Adata.SBZSL}}</span>
          </el-col>
          <el-col :span="6">
            <span>全院设备总原值: {{Adata.SBZYZ}}(万元)</span>
          </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-card style="background-color: #EBEEF5;"> 
        <span style="font-size:14px; float: left">设备统计</span>
      </el-card>
      <el-card style="background-color: #F2F6FC;"> 
        <el-date-picker
          v-model="Adata.value"
          type="daterange"
          align="right"
          unlink-panels
          @input="changeRefresh()"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-card>
      <el-row :gutter="24">
        <el-col :span="10"> 
          <el-card>
          <el-table
            size="mini"
            :data="Adata.AnalysisData"
            height="250"
            border
            style="width: 100%">
            <el-table-column
              prop="SBLB"
              label="类别">
            </el-table-column>
            <el-table-column
              prop="SBSL"
              label="台件">
            </el-table-column>
            <el-table-column
              prop="SBSLBL"
              label="台件占比">
            </el-table-column>
            <el-table-column
              prop="SBYZ"
              label="原值(万元)">
            </el-table-column>
            <el-table-column
              prop="SBYZBL"
              label="原值占比">
            </el-table-column>
          </el-table>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card>
          <span>占总台件比例</span>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main1" style="width: 100%;height:230px;"></div>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card>
          <span>占总原值比例</span>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main2" style="width: 100%;height:230px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-card style="background-color: #EBEEF5;"> 
        <span style="font-size:14px; float: left">选中时间段合计</span>
      </el-card>
      <el-card>
        <el-row :gutter="24">
          <el-col :span="6">
            <span>设备总数: {{Adata.SB_XZ_SL}}</span>
          </el-col>
          <el-col :span="6">
            <span>设备总原值: {{Adata.SB_XZ_YZ}}(万元)</span>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
  </el-card>
</template>

<script>
//导入echarts
import echarts from "echarts";

export default {
  name: "Detailed",
  methods: {

  },
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近三年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365*3);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      Adata:{
        AnalysisData:[],
        value:'',
        SBZSL:0,
        SBZYZ:0,
        SB_XZ_SL:0,
        SB_XZ_YZ:0,
      },
    };
  },
  methods: {
    changeRefresh(){
      var me = this;
      this.Refresh();
      me.$message.success("更改时间段成功！");
    },
    //刷新页面
    Refresh() {
      var me = this;
      this.Adata.SB_XZ_SL = 0
      this.Adata.SB_XZ_YZ = 0
      let url = "/static/data/Analysis.json";// /jcJsxxb
      if(url !== "") {
        me.getRequest(url,this.Adata.value).then(resp => {
            if(resp.status == 200) {
              this.Adata.AnalysisData = resp.data.results;
              this.Adata.SBZSL = resp.data.SBZSL;
              this.Adata.SBZYZ = resp.data.SBZYZ;
              this.onto();
              this.onSJHC();
            }
        });
      }
    },
    onSJHC(){//数据合成
      for(var i=0;i<this.Adata.AnalysisData.length;i++){
        this.Adata.AnalysisData[i].SBSLBL = (this.Adata.AnalysisData[i].SBSL / this.Adata.SBZSL)* 100
        this.Adata.AnalysisData[i].SBYZBL = (this.Adata.AnalysisData[i].SBYZ / this.Adata.SBZYZ)* 100
        this.Adata.AnalysisData[i].SBSLBL = this.Adata.AnalysisData[i].SBSLBL.toFixed(2) + '%'
        this.Adata.AnalysisData[i].SBYZBL = this.Adata.AnalysisData[i].SBYZBL.toFixed(2) + '%'
        this.Adata.SB_XZ_SL = this.Adata.SB_XZ_SL + this.Adata.AnalysisData[i].SBSL
        this.Adata.SB_XZ_YZ = this.Adata.SB_XZ_YZ + this.Adata.AnalysisData[i].SBYZ
      }
    },
    onto: function() {
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('main1'));
      var myChart2 = echarts.init(document.getElementById('main2'));
      // 指定图表的配置项和数据
      var option1 = {
          series : [
              {
                  name: '科室',
                  type: 'pie',
                  radius: '65%',
                  roseType: 'angle',
                  data:[
                      {value:this.Adata.AnalysisData[0].SBSL, name:'专项类'},
                      {value:this.Adata.AnalysisData[1].SBSL, name:'通用类'},
                      {value:this.Adata.AnalysisData[2].SBSL, name:'平台类'},
                  ]
              }
          ],
          itemStyle: {
              // 阴影的大小
              shadowBlur: 70,
              // 阴影水平方向上的偏移
              shadowOffsetX: 0,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
      };
      var option2 = {
          series : [
              {
                  name: '科室',
                  type: 'pie',
                  radius: '65%',
                  roseType: 'angle',
                  data:[
                      {value:this.Adata.AnalysisData[0].SBYZ, name:'专项类'},
                      {value:this.Adata.AnalysisData[1].SBYZ, name:'通用类'},
                      {value:this.Adata.AnalysisData[2].SBYZ, name:'平台类'}
                  ]
              }
          ],
          itemStyle: {
              // 阴影的大小
              shadowBlur: 70,
              // 阴影水平方向上的偏移
              shadowOffsetX: 0,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      myChart2.setOption(option2);
    }
  },
  created: function() {
    var me = this;

    this.Refresh();
  },
};
</script>

<style lang="scss">
</style>